<template>
  <div>
    <mt-cell title="报销种类">
      <span class="h3" @click="showpicker">{{ showname }} ></span>
    </mt-cell>
    <mt-cell title="报销子类" class="mtcell">
      <span class="h3" @click="showpicker2">{{ showname2 }} ></span>
    </mt-cell>
    <mt-popup :close-on-click-modal="false" v-model="popupVisible" position="bottom" style="width:100%" class="mint-popup">
      <mt-picker flex="2" ref="picker" :slots="dataList" :visible-item-count="5" :show-toolbar="true" :default-index="3" value-key="showname" @change="onDataChange">
        <p style="text-align:right;padding:10px" class="h2 fontcolor" @click="Determine">确定</p>
      </mt-picker>
    </mt-popup>
    <mt-popup :close-on-click-modal="false" v-model="popupVisible2" position="bottom" style="width:100%" class="mint-popup">
      <mt-picker ref="picker" :slots="firstarr" :visible-item-count="5" :show-toolbar="true" :default-index="3" value-key="showname" flex="2" @change="onDataChange2">
        <p style="text-align:right;padding:10px" class="h2 fontcolor" @click="Determine2">确定</p>
      </mt-picker>
    </mt-popup>
  </div>
</template>

<script>
export default {
  props: {
    picdata: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      handler: function (e) {
        e.preventDefault()
      },
      popupVisible: false,
      popupVisible2: false,
      kako: true,
      age: '',
      dataList: [
        {
          values: []
        }
      ],
      showname: '',
      showname2: '',
      showval: [],
      showval2: [],
      firstarr2: '',
      firstarr: [
        {
          values: []
        }
      ],
      ts: this.newStore()
    }
  },
  mounted () {
    //console.log(this.picdata, '222')

    if (this.picdata) {
      for (let i = 0; i < this.picdata.length; i++) {
        if (this.picdata[i].showid == this.values) {
          this.showname = this.picdata[i].showname
        }
      }
    }
    if (!this.values) {
      this.showname = '请选择'
    }
  },
  methods: {
    Determine () {
      document
        .getElementsByTagName('body')[0]
        .removeEventListener('touchmove', this.handler, { passive: false })
      //console.log(this.showval, 'ppp')
      this.popupVisible = false
      this.showname2 = '请选择'
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid: this.showval.showid,
        codetype: '05'
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        let a = []

        let item
        for (let index = 0; index < ts.d.data.operation1.length; index += 1) {
          let b = {}
          item = ts.d.data.operation1[index]
          b.showid = item.hash.code_id
          b.showname = item.hash.code_name
          a.push(b)
        }
        this.firstarr2 = a
      })
    },
    Determine2 () {
      document
        .getElementsByTagName('body')[0]
        .removeEventListener('touchmove', this.handler, { passive: false })
      this.popupVisible2 = false
      if (this.showname2 == '' || this.showname2 == undefined) {
        this.showname2 = '请选择'
      }
      //   this.showval2.concat(this.showval)
      //   this.$emit('getpicval', this.showval2)
      //   console.log(this.showname2, 'ww');
    },
    onDataChange (picker, values) {
      // console.log(values[0], 'w')

      if (values[0] == undefined) {
        this.showname = '请选择'
      } else {
        this.showname = values[0].showname
        this.showval = values[0]
        // console.log(values[0])
        //this.$emit('getpicval', values[0])
      }
    },
    onDataChange2 (picker, values) {
      // console.log(values[0], 'w')

      if (values[0] == undefined) {
        this.showname2 = '请选择'
      } else {
        this.showname2 = values[0].showname
        this.showval2 = values[0]
        //console.log(values[0],'values[0]')
        //this.showval2.concat(this.showval)
        //this.showval2.concat(this.showval)
        this.$emit(
          'update:getpicval',
          this.showval.showid + '-' + this.showval2.showid
        )
        console.log(this.showval2, 'this.showval2')
        //this.$emit('getpicval', this.showval2)
      }
    },
    showpicker () {
      document
        .getElementsByTagName('body')[0]
        .addEventListener('touchmove', this.handler, { passive: false })
      this.dataList[0].values = this.picdata
      this.popupVisible = true
    },
    showpicker2 () {
      document
        .getElementsByTagName('body')[0]
        .addEventListener('touchmove', this.handler, { passive: false })
      if (this.firstarr2) {
        //console.log(this.firstarr2,'this.firstarr');

        this.firstarr[0].values = this.firstarr2
      } else {
        this.firstarr[0].values = ['暂无数据']
      }
      this.popupVisible2 = true
    }
  }
}
</script>

<style scoped>
.picker-slot {
  width: 100%;
}
.picker {
  height: 100%;
}
.mint-cell-text {
  color: #080808 !important;
}
.h3 {
  display: inline-block;
  width: 200px;
  text-align: right;
}
</style>
